<template>
  <div>
    <a-row>
      <a-col :span="12">
        <a-card class="ant-card ">
          <div slot="title" class="cardTitle">
            <a-icon type="stock" class="titleIcon on" />
            当天设备数据统计
            <j-my-dep-tree-select v-has="'user:statisorg'" v-model="selDepartId" dict="sys_depart,depart_name,id"
              pid-field="parent_id" placeholder="请选择查询机构" hasChildField="1" style="width: 250px; font-size: 12px;position: absolute;
  right: 0;padding-right: 10px;" />
            <j-tree-select v-has="'user:statisadmin'" v-model="selDepartId" dict="sys_depart,depart_name,id"
              pid-field="parent_id" placeholder="请选择查询机构" hasChildField="1" style="width: 250px; font-size: 12px;position: absolute;
  right: 0;padding-right: 10px;" />
          </div>
          <!--实时数据-->
          <a-row>
            <a-col span="8" class="ant-card-detail-grid">
              <img src="~@/assets/annuoxing/yuan2.png" class="card-detail-img">
              <div class="text-overlay">
                <span class="font-main">{{ staData.deviceCount }}台</span>
                <span class="font-name">设备总数</span>
              </div>
            </a-col>
            <a-col span="8">
              <a-row class="networkCol">
                <a-card class="sta-realtime-item-card"
                  style="background: linear-gradient(to right, #25b4f6, #2598f6);border: 1px solid #60c3eb;">
                  <i class="action-jeecg actionzaixian item-icon white" />
                  <div class="item-font-div">
                    <span class="item-main-font">{{ staData.devOnlineCount }}台</span>
                    <span class="item-des-font">在线设备</span>
                  </div>
                </a-card>
              </a-row>
              <a-row class="networkCol">
                <a-card class="sta-realtime-item-card"
                  style="background: linear-gradient(to right, #25b4f6, #2598f6);border: 1px solid #60c3eb;">
                  <i class="action-jeecg actionlixian item-icon white" />
                  <div class="item-font-div">
                    <span class="item-main-font">{{ staData.devOfflineCount }}台</span>
                    <span class="item-des-font">离线设备</span>
                  </div>
                </a-card>
              </a-row>
            </a-col>
            <a-col span="8">
              <a-row class="networkCol">
                <a-card class="sta-realtime-item-card"
                  style="background: linear-gradient(to right, #25b4f6, #2598f6);border: 1px solid #60c3eb;">
                  <i class="action-jeecg actionbaifenbi item-icon white" />
                  <div class="item-font-div">
                    <span class="item-main-font">{{ staData.deviceCount != 0 ? (staData.devOnlineCount /
                      staData.deviceCount *
                      100).toFixed(1) : 0 }}%</span>
                    <span class="item-des-font">在线率</span>
                  </div>
                </a-card>
              </a-row>
              <a-row class="networkCol">
                <a-card class="sta-realtime-item-card"
                  style="background: linear-gradient(to right, #25b4f6, #2598f6);border: 1px solid #60c3eb;">
                  <i class="action-jeecg actionbaifenbi item-icon white" />
                  <div class="item-font-div">
                    <span class="item-main-font">{{ staData.deviceCount != 0 ? (staData.devOfflineCount /
                      staData.deviceCount
                      * 100).toFixed(1) : 0 }}%</span>
                    <span class="item-des-font">离线率</span>
                  </div>
                </a-card>
              </a-row>
            </a-col>
          </a-row>
          <a-row>
            <a-col span="8" class="ant-card-detail-grid" style="margin-top: 20px;">
              <img src="~@/assets/annuoxing/yuan2.png" class="card-detail-img">
              <div class="text-overlay">
                <span class="font-main">{{ staData.devWarningCount }}次</span>
                <span class="font-name">报警数</span>
              </div>
            </a-col>
            <a-col span="8">
              <a-row class="networkCol">
                <a-card class="sta-realtime-item-card"
                  style="background: linear-gradient(to right, #eab77d, #f69825);border: 1px solid #eab77d;">
                  <i class="action-jeecg actionyujingshidian item-icon white" />
                  <div class="item-font-div">
                    <span class="item-main-font">{{ staData.cityvolWarningCount }}次</span>
                    <span class="item-des-font">市电异常</span>
                  </div>
                </a-card>
              </a-row>
              <a-row class="networkCol">
                <a-card class="sta-realtime-item-card"
                  style="background: linear-gradient(to right, #efc27f, #f59910);border: 1px solid #efc27f;">
                  <i class="action-jeecg actiondianyabiao item-icon white" />
                  <div class="item-font-div">
                    <span class="item-main-font">{{ staData.mainvolWarningCount }}次</span>
                    <span class="item-des-font">主电压异常</span>
                  </div>
                </a-card>
              </a-row>
              <a-row class="networkCol">
                <a-card class="sta-realtime-item-card"
                  style="background: linear-gradient(to right, #efc27f, #f59910);border: 1px solid #efc27f;">
                  <i class="action-jeecg actiondianya item-icon white" />
                  <div class="item-font-div">
                    <span class="item-main-font">{{ staData.backvolWarningCount }}次</span>
                    <span class="item-des-font">备电压异常</span>
                  </div>
                </a-card>
              </a-row>
              <a-row class="networkCol">
                <a-card class="sta-realtime-item-card"
                  style="background: linear-gradient(to right, #efc27f, #f59910);border: 1px solid #efc27f;">
                  <i class="action-jeecg actiontongdaoguanli item-icon white" />
                  <div class="item-font-div">
                    <span class="item-main-font">{{ staData.otherWarningCount }}次</span>
                    <span class="item-des-font">通道异常</span>
                  </div>
                </a-card>
              </a-row>
            </a-col>
            <a-col span="8">
              <a-row class="networkCol">
                <a-card class="sta-realtime-item-card"
                  style="background: linear-gradient(to right, #eab77d, #f69825);border: 1px solid #eab77d;">
                  <i class="action-jeecg actiondianliu item-icon white" />
                  <div class="item-font-div">
                    <span class="item-main-font">{{ staData.currentWarningCount }}次</span>
                    <span class="item-des-font">电流异常</span>
                  </div>
                </a-card>
              </a-row>
              <a-row class="networkCol">
                <a-card class="sta-realtime-item-card"
                  style="background: linear-gradient(to right, #eab77d, #f59910);border: 1px solid #eab77d;">
                  <i class="action-jeecg actionyujingups item-icon white" />
                  <div class="item-font-div">
                    <span class="item-main-font">{{ staData.upsWarningCount }}次</span>
                    <span class="item-des-font">ups异常</span>
                  </div>
                </a-card>
              </a-row>
              <a-row class="networkCol">
                <a-card class="sta-realtime-item-card"
                  style="background: linear-gradient(to right, #efc27f, #f59910);border: 1px solid #efc27f;">
                  <i class="action-jeecg actionwendu1 item-icon white" />
                  <div class="item-font-div">
                    <span class="item-main-font">{{ staData.tempWarningCount }}次</span>
                    <span class="item-des-font">温度异常</span>
                  </div>
                </a-card>
              </a-row>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
      <a-col :span="12">
        <a-card class="ant-card">
          <div slot="title" class="cardTitle">
            <a-icon type="pie-chart" class="titleIcon alarm" />
            当天报警类型分析
          </div>
          <pie title="" :dataSource="pieData" :height="341" />
        </a-card>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span=24>
        <a-card class="ant-card" :bordered="false">
          <div slot="title" class="cardTitle">
            <a-icon type="area-chart" class="titleIcon on" />
            预警信息
          </div>
          <tig-device-warning-table :orgCode="selOrgCode" :logCate="'1'" ref="tDevWarnTable"></tig-device-warning-table>
        </a-card>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span=24>
        <a-card class="ant-card" :bordered="false">
          <div slot="title" class="cardTitle">
            <a-icon type="area-chart" class="titleIcon on" />
            报警数据统计
          </div>
          <!-- <line-chart-multid title="" :dataSource=lineData :field=lineFields /> -->
          <area-chart-ty title="过去7天" :dataSource="lineData" x="日期" y="报警数" />
        </a-card>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span=24>
        <a-card class="ant-card">
          <div slot="title" class="cardTitle">
            <a-icon type="bar-chart" class="titleIcon on" />
            设备在线率
          </div>
          <bar title="过去7天" :dataSource="barData" yaxisText="在线率%" />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>


<script>

import { getDeviceStatistics, getDeviceStatisticsByDays } from '@/api/deviceApi'
import {queryOrgCodeByDepartId } from '@api/api'
import LineChartMultid from '@/components/chart/LineChartMultid'
import AreaChartTy from '@/components/chart/AreaChartTy'
import Bar from '@/components/chart/Bar'
import Pie from '@/components/chart/Pie'
import store from '@/store/'
import TigDeviceWarningTable from '@/views/tiger/log/TigDeviceWarningTable'

export default {
  name: 'DeviceStatistic',
  //inject: ['closeCurrent'],
  components: {
    LineChartMultid, AreaChartTy, Bar, Pie,TigDeviceWarningTable
  },
  props: {

  },
  data() {
    return {
      staData: {},
      staDataByDays: {},
      lineData: [],
      barData: [],
      pieData: [],
      selDepartId: [21],
      selOrgCode:"",
      userInfo: {},
      cond: "",
      timer: "",  //定时刷新页面数据定时器句柄
      refreshFps: 15000,//刷新间隔时间
    }
  },
  computed: {

  },
  watch: {
    selDepartId(val) {
      var _that = this
      this.loadData({ departId: val })
      queryOrgCodeByDepartId({ departId: val}).then((res) => {
        _that.selOrgCode = res;
      })
    }
  },
  created() {
    this.userInfo = store.getters.userInfo
    this.selDepartId = this.userInfo.departIds
    this.cond = '{"org_code":' + '"' + this.userInfo + '"}'
    this.timer = setInterval(this.dataRefresh, this.refreshFps);
  },
  mounted() {

  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    loadData(_data) {
      var _that = this
      getDeviceStatistics({ departId: _data.departId }).then((res) => {
        if (res.success) {
          let data = res.result;
          _that.staData = data;
          _that.converPieData();
        }
      })
      getDeviceStatisticsByDays({ departId: _data.departId, days: 7 }).then((res) => {
        if (res.success) {
          let data = res.result;
          _that.staDataByDays = data;
          //console.log("getDeviceStatisticsByDays:" + JSON.stringify(_that.staDataByDays))
          _that.converLineAndBarData();
        }
      })
    },
    dataRefresh() {
      this.loadData({ departId: this.selDepartId })
      this.$refs.tDevWarnTable.tableRefresh();
    },
    converPieData() {
      this.pieData = [
        { item: '市电异常', count: this.staData.cityvolWarningCount },
        { item: '主电压异常', count: this.staData.mainvolWarningCount },
        { item: '备电压异常', count: this.staData.backvolWarningCount },
        { item: '电流异常', count: this.staData.currentWarningCount },
        { item: 'ups异常', count: this.staData.upsWarningCount },
        { item: '温度异常', count: this.staData.tempWarningCount },
        { item: '通道异常', count: this.staData.otherWarningCount },
      ]
    },
    converLineAndBarData() {
      let i = 0
      this.lineData = [];
      this.barData = [];
      for (var key in this.staDataByDays) {
        // 获取键值对
        let value = this.staDataByDays[key];
        let count = value != undefined ? value.devWarningCount : 0;
        this.lineData[i] = { x: key, y: count };
        let rate = 0;
        if (value != undefined && value.deviceCount > 0)
          rate = value.devOnlineCount / value.deviceCount * 100;
        this.barData[i] = { x: key, y: rate };
        i++;
      }
      //console.log("lineData", JSON.stringify(this.lineData));
      //console.log("barData", JSON.stringify(this.barData));
    }
  }
}
</script>

<style lang="less" scoped>
table {
  font-size: 15px;
  width: 100%;
}

th,
td {
  padding: 2px;
  border: 1px solid black;
}

.on {
  color: #0aabf6 !important;
}


.alarm {
  color: rgba(241, 157, 83, 0.832);
}

.white {
  color: rgb(255, 255, 255);
}

.cardTitle {
  display: flex;
  align-content: center;
  flex-direction: row;
}

.titleIcon {
  padding-right: 10px;
  font-size: 28px;
}

.networkIcon {
  font-size: 28px;
  font-weight: 500;
  vertical-align: top;
  display: flex;
  align-content: center;
  justify-content: left;
}

.networkCol {
  display: flex;
  flex-direction: row;
}

.networkFont {
  font-size: 12px;
  font-weight: 500;
  vertical-align: bottom;
  text-align: bottom;
  padding-left: 8px;
}


.ant-card {
  margin-top: 5px;
  margin-right: 10px;
  border-radius: 20px;
}

.ant-card-detail-grid {
  position: relative;
  border-color: white;

  .card-detail-img {
    display: block;
    margin: 0 auto;
    height: 130px;
    width: 130px;
  }

  .font-main {
    font-size: 18px;
    font-weight: 600;
    color: rgb(28, 144, 245);
    text-align: center;
  }

  .font-name {
    font-size: 13px;
    font-weight: 550;
    color: rgba(76, 82, 82, 0.863);
    text-align: center;
  }

}

.text-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  //justify-content: center;
  transform: translate(-50%, -50%);
}

.sta-realtime-item-card {
  width: 90%;
  display: flex;
  flex-direction: row;
  border-radius: 5px;
  height: 80%;
  margin-left: 15px;

  .item-icon {
    font-size: 24px;
    font-weight: 500;
    position: absolute;
    left: 8px;
    top: 5px;
  }

  .item-font-div {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 2%;
    bottom: 0;
    color: azure;
    height: 90%;

    .item-main-font {
      font-size: 14px;
      font-weight: 550;
      display: flex;
      justify-content: right;
    }

    .item-des-font {
      font-size: 10px;
      font-weight: 500;
    }
  }
}
</style>